<template>
	<view class="container">
		<uni-nav-bar title="修改售价" fixed statusBar :border="false" height="88rpx" left-icon="left" @clickLeft="onClickLeft"></uni-nav-bar>
		<view class="inner">
			<view class="list" v-for="(item,index) in specificationList" :key="item.id">
				<view class="code">
					商品条码：{{ item.barCode }}
				</view>
				<view class="flexBox">
					<view class="left">
						<text>售价：{{ item.storePrice }} 元</text>
						<uni-icons type="compose" size="28" color="#2979ff" @click="updatePrice(item)"></uni-icons>
					</view>
					<text>规格数量：{{ item.number }} </text>
				</view>
			</view>
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose" mode="input" title="修改售价" @confirm="submit" @close="close" before-close>
					<template>
						<uni-forms ref="form" :model="specObj" :rules="rules" label-width="50" validate-trigger="blur">
							<uni-forms-item label="售价:" name="storePrice">
								<uni-easyinput type="number" v-model="specObj.storePrice" placeholder="请输入售价" :clearable="false" trim="all" adjust-position />
							</uni-forms-item>
						</uni-forms>
					</template>
				</uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import { reqUpdatePrice,reqGetMoreStandard } from '@/apis/goods.js';
	export default {
		name:"ChangePrice",
		data() {
			return {
				commodityId: '',
				specificationList: [],
				specObj:{},
				rules: {
					// 对name字段进行必填验证
					storePrice: {
						rules: [{
								required: true,
								errorMessage: '请输入售价',
							},
							{
								format: 'number',
								errorMessage: '售价格式错误'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									let reg = /^(?!(^0$|0\.0{1,2}$))[0-9]+(\.[0-9]{1,2})?$/
									if (!reg.test(value)) {
										callback('售价最多两位小数')
									}
								}
							}
						],
					}
				},
			}
		},
		onLoad(params) {
			this.commodityId = params?.commodityId;
			this.getMoreStandard();
		},
		methods: {
			async getMoreStandard() {
				let res = await reqGetMoreStandard({commodityId:this.commodityId})
				if(res.code === 200) {
					this.specificationList = res.data;
				}
			},
			updatePrice(item) {
				this.specObj = {...item};
				this.$refs.inputDialog.open();
			},
			submit() {
				this.$refs.form.validate().then(async (suc) => {
					let res = await reqUpdatePrice({ ...this.specObj });
					if (res.code === 200) {
						this.specObj = {};
						this.$refs.inputDialog.close();
						uni.utils.toast('修改成功', 'success');
						this.getMoreStandard();
					}
				}).catch((err) => {
					console.log('失败')
				})
			},
			close() {
				this.specObj = {};
				this.$refs.inputDialog.close();
				console.log("关闭");
			}
		}
	}
</script>
<style>
page {
	background: #f7f7f7;
}
</style>
<style lang="scss" scoped>
	.inner {
		width: 100%;
		box-sizing: border-box;
		padding: 0 15rpx;
		.list {
			padding: 20rpx 0;
			border-bottom: 1rpx solid #ccc;
			.code {
				width: 100%;
				margin-bottom: 5rpx;
				font-size: $uni-font-size-upBase;
				color: #000;
			}
			.flexBox {
				display: flex;
				justify-content: space-between;
				align-items: center;
				text {
					font-size: $uni-font-size-base;
				}
				.left {
					display: flex;
					width: 290rpx;
					justify-content: space-between;
					align-items: center;
				}
			}
		}
	}
</style>